<template>
  <div class="app-container">
    <el-form ref="formLabelAlign"   v-loading="loading" :model="formLabelAlign"   label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="账号名称">
            <el-input   :disabled="disabled" v-model="formLabelAlign.username" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户姓名" prop="name">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>

        <el-col :span="8">
          <el-form-item label="手机号码" prop="phone">
            <el-input  v-model="formLabelAlign.phone"   />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮件" prop="email">
            <el-input  v-model="formLabelAlign.email"   />
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="用户性别" prop="sex">
            <el-select v-model="formLabelAlign.sex" clearable style="width: 100%;" placeholder="请选择">
              <el-option label="请选择" value="" />
              <el-option label="男" value="0" />
              <el-option label="女" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="用户头像" prop="phone">
            <el-upload
              :action="action"
              class="avatar-uploader"
              :headers="headers"
              :show-file-list="false"
              accept="image/png, image/jpeg,.pdf"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col> -->
      </el-row>




      <el-row style="text-align: center;">

        <el-button :loading="loading" @click="save('formLabelAlign')" type="primary"   >确 定</el-button>
        <el-button @click="resetForm('formLabelAlign')"     >重 置</el-button>

      </el-row>
    </el-form>



  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInfo, saveUser } from '@/api/user'
import { fail, fileToBase64, resetForm, success } from '@/api/common'
import store from '@/store'
import { getToken } from '@/utils/auth'

export default {
  name: 'Profile',

  data() {
    return {
      headers:{
        Authorization:getToken()
      },
      action:process.env.VUE_APP_BASE_API+'upload/image',
      formLabelAlign:{
        username:'',
        name:'',
        id:''

      },
      imageUrl:'',
      disabled: true,
      showImage: false,
      loading: true
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {

  },
  mounted() {
     this.loadData();
    },
  methods: {

    handleAvatarSuccess(res, file) {
      console.log('res',res)
      this.formLabelAlign.avatar=res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    save(formName){
       let form=JSON.parse(JSON.stringify(this.formLabelAlign));
       form.showImage=this.showImage;
       form.state=0
       saveUser(form).then(res=>{
         if(res.code===200){
           success(res.msg);
           if(this.showImage){
               store.dispatch('user/getInfo');
           }
         }else{
           fail(res.msg);
         }
       })
    },
    resetForm(formName){
      resetForm(this,formName);
    },
    loadData(){
      getInfo().then(response=>{
        if(response.code===200){
          this.loading=false;
          this.formLabelAlign=response.data;
          if(this.formLabelAlign.avatar!=='' || this.formLabelAlign.avatar!==null){
            this.imageUrl=process.env.VUE_APP_BASE_API+'images/'+this.formLabelAlign.avatar;
          }
        }
      })
    }
  }
}
</script>
<style >
.avatar-uploader img{
  cursor: pointer;
  width: 100px;
  border-radius: 50px;
  height: 100px;
}
</style>
